/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div class="user-info-model">
    <m-list-box-f>
      <template slot="name">{{$t('User Name')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.userName}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f>
      <template slot="name">{{$t('Email')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.email}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f>
      <template slot="name">{{$t('Phone')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.phone}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f>
      <template slot="name">角色</template>
      <template slot="content">
        <span class="sp1">{{userInfo.userType === 'GENERAL_USER' ? `${$t('Ordinary users')}` : `${$t('Administrator')}`}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f v-ps="['GENERAL_USER']">
      <template slot="name">{{$t('Tenant')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.tenantCode}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f v-ps="['GENERAL_USER']">
      <template slot="name">{{$t('Queue')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.queueName}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f>
      <template slot="name">{{$t('Create Time')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.createTime | formatDate}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f>
      <template slot="name">{{$t('Update Time')}}</template>
      <template slot="content">
        <span class="sp1">{{userInfo.updateTime | formatDate}}</span>
      </template>
    </m-list-box-f>
    <m-list-box-f>
      <template slot="name">&nbsp;</template>
      <template slot="content">
        <el-button
          type="primary"
          size="small"
          @click="_edit()"
        >{{$t('Edit')}}</el-button>
        <el-dialog
          :title="item ? $t('Edit User') : $t('Create User')"
          v-if="createUserDialog"
          :visible.sync="createUserDialog"
          width="auto"
          append-to-body
        >
          <m-create-user
            :item="item"
            :from-user-info="true"
            @onUpdate="onUpdate"
            @close="close"
          ></m-create-user>
        </el-dialog>
      </template>
    </m-list-box-f>
  </div>
</template>
<script>
  import { mapActions, mapState, mapMutations } from 'vuex'
  import mListBoxF from '@/module/components/listBoxF/listBoxF'
  import mCreateUser from '@/conf/home/pages/security/pages/users/_source/createUser'

  export default {
    name: 'user-info',
    data () {
      return {
        createUserDialog: false,
        item: {}
      }
    },
    props: {},
    methods: {
      ...mapMutations('user', ['setUserInfo']),
      ...mapActions('user', ['getUserInfo']),
      /**
       * edit
       */
      _edit () {
        this.item = this.userInfo
        this.createUserDialog = true
      },
      onUpdate (param) {
        this.setUserInfo(param)
        this.getUserInfo().finally(() => {
          this.createUserDialog = false
        })
      },
      close () {
        this.createUserDialog = false
      }
    },
    watch: {},
    created () {
    },
    mounted () {
    },
    computed: {
      ...mapState('user', ['userInfo'])
    },
    components: { mListBoxF, mCreateUser }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.user-info-model {
  padding: 20px;
  .list-box-f {
    margin-bottom: 8px;
    .text {
      text-align: left;
      width: 80px;
      font-size: 14px;
      color: #888;
    }
    .cont {
      margin-left: 10px;
      .sp1 {
        font-size: 14px;
        color: #333;
        display: inline-block;
        padding-top: 6px;
      }
    }
  }
}
</style>
